import React, { useEffect, useState } from 'react';
import { Pagination, Breadcrumb, Button, Space, Input, Form, Row, Col, Modal, Checkbox, Table, InputNumber } from 'antd';
import moment from 'moment'
import common from "../../common"
import "./index.css"
import PaginationBar from "../../components/paginationbar";


function Role(props) {
    const [newsList, setNewsList] = useState([])

    const [searchForm] = Form.useForm();
    let [search, setSearch] = useState({})       //搜索内容

    let [pagination, setPagination] = useState({
        total: 0,
        page: 1,
        limit: 10,
    })

    const [createModalVisible, setCreateModalVisible] = useState(false)
    const [editModalVisible, setEditModalVisible] = useState(false)
    const [particularsVisible, setparticularsVisible] = useState(false)
    const [roleDataList, setRoleDataList] = useState([
        { label: 'Apple', value: 1 },
        { label: 'Pear', value: 2 },
        { label: 'xxx', value: 3 },
        { label: 'Orange', value: 4 }])
    const [createForm] = Form.useForm();
    const [editForm] = Form.useForm();

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
        },
        {
            title: '分组名称',
            dataIndex: 'name',
        },

        {
            title: '说明',
            dataIndex: 'spec',
        },
        {
            title: '操作',
            align: "center",
            width: 270,
            fixed: "right",
            render: (text, record, index) => {
                return (
                    <>
                        <Button size={'small'} type={'link'} onClick={() => {
                            // props.history.push('/userRole/role/' + record.id)
                            getBoxs()
                            setparticularsVisible(true)
                            editForm.setFieldsValue(record)
                        }}>权限详情</Button>
                        <Button size={'small'} type={'link'} onClick={() => {
                            props.history.push('/role/userRole/' + record.id)
                        }}>人员详情</Button>
                        <Button size={'small'} type={'link'} onClick={() => {
                            setEditModalVisible(true)
                            editForm.setFieldsValue(record)
                        }}>编辑</Button>
                        <Button size={'small'} type={'link'} onClick={() => {
                            common.confirm("确定要删除吗?", () => {
                                del(record.id)
                            })
                        }}>删除</Button>
                    </>
                )
            }
        }
    ];

    // 获取盒子列表
    const getBoxs = () => {
        let params = {
            ...search,
            page: 1,
            limit: 100,
        }
        common.ajax("GET", "/passport/roleTask/list", params).then(data => {
            console.log(data)
            let boxlists = []
            let boxitem = { label: 1, value: 1 }
            data.map(item => {
                boxitem = { label: item.name, value: item.name }
                boxlists.push(boxitem)
            })
            
            setRoleDataList(boxlists)
        })
    }

    const init = () => {
        let params = {
            page: pagination.page,
            limit: pagination.limit,
            ...search
        }

        common.ajax("GET", "/passport/role/list", params).then(data => {
            setNewsList(data.list)
            setPagination(data.pagination)
        })
    }

    const create = (data) => {
        common.loadingStart()
        common.ajax("POST", "/passport/role/create", data).then(res => {
            common.toast("操作成功")
            setCreateModalVisible(false)
            init()
        }).finally(common.loadingStop)
    }

    const update = (data) => {
        common.loadingStart()
        common.ajax("POST", "/passport/role/update", data).then(res => {
            common.toast("操作成功")
            setEditModalVisible(false)
            init()
        }).finally(common.loadingStop)
    }

    const del = (id) => {
        common.loadingStart()
        common.ajax("POST", "/passport/role/delete", { id }).then(res => {
            common.toast("操作成功")
            init()
        }).finally(common.loadingStop)
    }

    useEffect(() => {
        init()
    }, [pagination.page, pagination.limit, search])


    return (
        <div className="UserRole">
            <Breadcrumb>
                <Breadcrumb.Item>用户管理</Breadcrumb.Item>
                <Breadcrumb.Item>用户组管理</Breadcrumb.Item>
            </Breadcrumb>
            <div style={{ padding: 24, minHeight: 600 }}>

                <div>
                    <Button type="primary" onClick={() => {
                        setCreateModalVisible(true)
                        createForm.setFieldsValue({ title: "" })
                    }}>新增</Button>
                </div>

                <Form form={searchForm} style={{ marginTop: 15 }}>
                    <Row gutter={24}>
                        <Col span={8}>
                            <Form.Item label="分组名" name="name">
                                <Input placeholder="分组名" />
                            </Form.Item>
                        </Col>


                        <Col span={8}>
                            <Form.Item>
                                <Space>
                                    <Button onClick={() => {
                                        setSearch(searchForm.getFieldsValue())
                                    }}>搜索</Button>

                                    <Button onClick={() => {
                                        let emptySearch = {
                                            name: '',
                                        }
                                        searchForm.setFieldsValue(emptySearch)
                                        setSearch(emptySearch)

                                    }}>清空</Button>
                                </Space>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>

                <Table rowKey={columns => columns.id} dataSource={newsList} columns={columns} pagination={false} />

                {pagination.total < 5 ? '' :
                    <PaginationBar>
                        <Pagination
                            style={{ marginTop: 25 }}
                            pageSizeOptions={['10', '20', '50', '100']}
                            onChange={(page, limit) => {
                                setPagination({ ...pagination, page, limit })
                            }}
                            onShowSizeChange={(page, limit) => {
                                setPagination({ ...pagination, page, limit })
                            }}
                            showTotal={total => `共${total}条`}
                            total={pagination.total}
                            defaultCurrent={pagination.page}
                            current={pagination.page}
                            defaultPageSize={pagination.limit}
                            showSizeChanger
                            showQuickJumper
                        /></PaginationBar>}
            </div>

            <Modal title="新增" destroyOnClose={true} footer={false} maskClosable={false} visible={createModalVisible} onCancel={() => {
                setCreateModalVisible(false)
            }}
            >
                <Form preserve={false}
                    form={createForm}
                    onFinish={(values) => {
                        create(values)
                    }}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                >

                    <Form.Item
                        label="分组名"
                        name="name"
                        rules={[{ required: true, message: '请输入标题' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="说明"
                        name="spec"
                        rules={[{ required: true, message: '说明不能为空' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="排序"
                        name="sort"
                    >
                        <Input type="number" />
                    </Form.Item>
                    <Form.Item
                        label="状态"
                        name="status"
                    >
                        <Input type="number" />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>

            <Modal title="编辑" footer={false} maskClosable={false} visible={editModalVisible} onCancel={() => {
                setEditModalVisible(false)
            }}
            >
                <Form
                    form={editForm}
                    onFinish={(values) => {
                        console.log(values)
                        update(values)
                    }}
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                >
                    <Form.Item
                        hidden={true}
                        name="id"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item

                        label="分组名"
                        name="name"
                        rules={[{ required: true, message: '请输入标题' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="说明"
                        name="spec"
                        rules={[{ required: true, message: '说明不能为空' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="排序"
                        name="sort"
                    >
                        <Input type="number" />
                    </Form.Item>
                    <Form.Item
                        label="状态"
                        name="status"
                    >
                        <Input type="number" />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
            <Modal title="详情" footer={false} maskClosable={false} visible={particularsVisible} onCancel={() => {
                setparticularsVisible(false)
            }}
            >
                <Form
                    form={editForm}
                    onFinish={(values) => {
                        console.log(values.roleTaskList)
                        console.log(values.id)
                    }}
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                >
                    <Form.Item
                        hidden={true}
                        name="id"
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item name="roleTaskList" label="权限详情" className={"dashboardxxxx"}>
                        <Checkbox.Group options={roleDataList} />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );

}

export default Role;
